<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .clock-wrapper {
            width: 200px;
            margin: 50px auto;
            text-align: center;
        }

        .clock-wrapper .clock-time {
            font-size: 40px;
            line-height: 60px;
            height: 60px;
            font-family: "clockIcon";
        }

        .clock-wrapper .clock-date {
            font-size: 16px;
            line-height: 20px;
            height: 20px;
        }

        @font-face {
            font-family: "clockIcon";
            src: url("../font/clockicons.woff2");
        }

        .clock-title {
            display: flex;
            justify-content: space-evenly;
        }

        button {
            padding: 5px 10px;
        }

        .ms {
            font-size: 24px;
        }

        .search {
            width: 400px;
            height: 40px;
            display: block;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <input type="text" class="search">
</body>
<script>

    // 函数防抖 => 在指定时间内连续触发,只执行最后一


    var search = document.getElementsByClassName("search")[0];

    // function inputHandler(e) {
    //     var key = this.value.trim();
    //     // 发送请求到后台 -> 后台从数据库搜索数据返回
    //     console.log(key);
    //     console.log(this); // this -> search
    //     console.log(e);   // e事件对象
    // }

    // 原始代码
    // search.oninput = inputHandler;



    function inputHandler(e) {
        console.log(this);
        console.log(e);
        var key = this.value.trim();
        // 发送请求到后台 -> 后台从数据库搜索数据返回
        console.log(key);
    }

    var newFn = debounceFn(inputHandler, 300);
    search.oninput = newFn;

    /* function debounceFn(callbackFn, delay = 0) {
        var dTimer = null;
        // 返回新函数 (防抖处理) -> 传入的回调函数(原函数)
        return function (...args) { //将新函数接收的所有参数整合到数组中
            console.log("新函数", this);
            console.log("新函数", args);
            clearTimeout(dTimer);
            dTimer = setTimeout(() => {
                // callbackFn(); // this -> window   
                callbackFn.apply(this, args);
            }, delay);
        }
    } */


    // 调用debounceFn() 根据原函数(回调函数->原本期望执行的内容) 得到一个新函数
    // 新函数执行时,只是多了个防抖功能,最终还是要执行 原函数(回调函数->原本期望执行的内容)
    // 需要将 新函数的this指向和接收的参数 原封不动的传递给 -> 原函数(回调函数->原本期望执行的内容)
    function debounceFn(callbackFn, delay = 0) {
        var dTimer = null;
        // 返回新函数 (防抖处理) -> 传入的回调函数(原函数)
        return function (...args) { //将新函数接收的所有参数整合到数组中
            clearTimeout(dTimer);
            dTimer = setTimeout(() => {
                // callbackFn(); // this -> window   无参数
                callbackFn.apply(this, args);
            }, delay);
        }
    }













</script>

</html>